<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-if="showFilter('Agradebox')" label="等级箱子" name="Agradebox" />
      <el-tab-pane v-if="showFilter('Btimebox')" label="定时箱子" name="Btimebox" />
      <el-tab-pane v-if="showFilter('Cbreakbox')" label="裂变箱子" name="Cbreakbox" />
      <div class="tab-content">
        <keep-alive>
          <!-- https://cn.vuejs.org/v2/guide/components.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6 -->
          <component :is="curTabcompnents[activeName]" />
        </keep-alive>
      </div>

    </el-tabs>
  </div>
</template>

<script>

import GradeBoxTabPane from './components/GradeBoxTabPane'
import TimeBoxTabPane from './components/TimeBoxTabPane'
import BreakBoxTabPane from './components/BreakBoxTabPane'
import { mapGetters } from 'vuex'
export default {
  name: 'Tab',
  components: { BreakBoxTabPane, TimeBoxTabPane, GradeBoxTabPane },
  data() {
    return {
      activeName: '',
      curTabcompnents: {}

    }
  },
  computed:{
    ...mapGetters([
      'fatherPower'
    ])
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`)
    },
    fatherPower(val){
      this.componentsHandle()
    }
  },
  created() {
    this.componentsHandle()
    // init the default selected tab
    const tab = this.$route.query.tab
    if (tab) {
      this.activeName = tab
    }
  },
  methods: {
    showFilter(str){
      let data = Object.keys(this.curTabcompnents)
      if(data.indexOf(str) != -1){
        return true
      }else{
        return false
      }
    },
    //动态组件处理
    componentsHandle(){
      let idList = []

      for(let i=0;i<this.fatherPower.length;i++){
        if(this.fatherPower[i]>=8 && this.fatherPower[i]<=10){
          idList.push(this.fatherPower[i])
        }
      }
      let curTabcompnents = [
        {
           id:8,
           name:'Agradebox',
           compnent:'GradeBoxTabPane'
        },
        {
           id:9,
           name:'Btimebox',
           compnent:'TimeBoxTabPane'
        },
        {
           id:10,
           name:'Cbreakbox',
           compnent:'BreakBoxTabPane'
        }
      ]

      let compnentsData = {}
      for(let k=0;k<idList.length;k++){
        let id = idList[k]
        let ItemData = curTabcompnents.find(item => item.id == id)
        compnentsData[ItemData['name']] = ItemData['compnent']
      }
      this.curTabcompnents=compnentsData
      this.activeName = Object.keys(compnentsData)[0]
    },
    handleClick(tab) {
      this.activeName = tab.name
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  padding:0px;
}

</style>
